﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/main.master" EnableViewState="false"
    CodeFile="script_example_05.aspx.cs" Inherits="sdk_category_script_example_05" %>

<%@ Register Src="../../modules/categories_v2.ascx" TagName="categories" TagPrefix="uc1" %>
<asp:Content ID="hd" ContentPlaceHolderID="HeadContent" runat="server">
    <link rel="stylesheet" type="text/css" href="../style.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Creating Jquery Dropdown - ASP.NET Category Script 2.0 </title>
</asp:Content>
<asp:Content ID="pagecontent" ContentPlaceHolderID="MC" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            $(".dropdown dt a").click(function () {
                $(".dropdown dd ul").toggle();
            });

            $(".dropdown dd ul li a").click(function () {
                var text = $(this).html();
                $(".dropdown dt a span").html(text);
                $(".dropdown dd ul").hide();
                $("#result").html("Selected value is: " + getSelectedValue("sample"));
            });

            function getSelectedValue(id) {
                return $("#" + id).find("dt a span.value").html();
            }

            $(document).bind('click', function (e) {
                var $clicked = $(e.target);
                if (!$clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").hide();
            });

        });
    </script>
    <div id="msg" runat="server">
    </div>
    <div class="main_block ui-corner-all">
        <div class="item">
            <div class="item">
                <div class="module ui-corner-all">
                    <a id="hm" class="bld" runat="server"></a>&nbsp;&gt;&nbsp;<a id="sdk" class="bld"
                        runat="server"></a>&nbsp;&gt;&nbsp;<a id="vd" class="bld" runat="server"></a>&nbsp;&gt;&nbsp;Creating
                    Jquery Dropdown
                </div>
            </div>
            <div class="item_pad">
                <div class="module ui-corner-all">
                    <div class="heading">
                        <h3 id="cmt" runat="server">
                            Creating Jquery Dropdown
                        </h3>
                    </div>
                    <div class="pd_5 ptext">
                        <p class="bgtext">
                            This example will create jquery dropdown control loading category data from database
                        </p>
                    </div>
                </div>
            </div>
            <div class="item_pad">
                <div id="cnav03" class="module ui-corner-all">
                    <dl id="sample" class="dropdown">
                        <dt><a href="#"><span>Please select category</span></a></dt>
                        <dd>
                            <uc1:categories ID="Categories1" runat="server" />
                        </dd>
                    </dl>
                </div>
            </div>
             <div class="item_pad">
                <div class="module ui-corner-all">
                     <span id="result"></span>                    
                </div>
            </div>
             
            <div class="item_pad">
                <div class="module ui-corner-all">
                    <div class="heading">
                        <h3>
                            Examples &amp; Codes (Create Jquery Dropdown List)
                        </h3>
                    </div>
                    <div class="pd_5 ptext">
                        <div class="cscroll">

<pre class="csharpcode">
<span class="rem">// Code Behind</span>
<span class="kwrd">if</span> (Categories1 != <span class="kwrd">null</span>)
{
   Categories1.Type = 13; <span class="rem">// Category Type (13: Classified)</span>
   Categories1.MainCategoryURL = <span class="kwrd">false</span>;
   Categories1.ShowParentsOnly = <span class="kwrd">true</span>;
   Categories1.NavigationCssClass = <span class="str">""</span>; <span class="rem">// clear css style</span>
   Categories1.ListingCssClass = <span class="str">""</span>;
   Categories1.isHeading = <span class="kwrd">false</span>;
   Categories1.isAll = <span class="kwrd">true</span>;
   Categories1.isMainNavigation = <span class="kwrd">true</span>;
   Categories1.URL = <span class="str">"#"</span>;
   Categories1.Value = <span class="str">"[CN]&lt;span class=\"value\"&gt;[CT]&lt;/span&gt;"</span>; <span class="rem">// Customize       Category Text Info, [CN]-&gt; categoryname, [CT] -&gt; term, [CID] -&gt; categoryid</span>
}</pre>
                        </div>
                    </div>
                    <div class="pd_5 ptext">
                        <p>
                            Css Style Sheet used in this example
                        </p>
                    </div>
                    <div class="cscroll">
                        <pre class="csharpcode">
#cnav03 .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
#cnav03 .dropdown dd { position:relative; }
#cnav03 .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
#cnav03 .dropdown a:hover { color:#5d4617;}
#cnav03 .dropdown dt a:hover, .dropdown dt a:focus { color:#5d4617; border: 1px solid #5d4617;}
#cnav03 .dropdown dt a {background:#e4dfcb url(images/arrow.png) no-repeat scroll right center; display:block; padding-right:20px;  border:1px solid #d4ca9a; width:150px;}
#cnav03 .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
#cnav03 .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none; left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
#cnav03 .dropdown span.value { display:none;}
#cnav03 .dropdown dd ul li a { padding:5px; display:block;}
#cnav03 .dropdown dd ul li a:hover { background-color:#d0c9af;}
#cnav03 .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }

                    </div>
                </div>
            </div>
            <div class="item_pad">
                <div class="module ui-corner-all">
                    <!-- AddThis Button BEGIN -->
                    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
                        <a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2">
                        </a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4">
                        </a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style">
                        </a>
                    </div>
                    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=mediasoftpro"></script>
                    <!-- AddThis Button END -->
                </div>
            </div>
        </div>
    </div>
</asp:Content>
